<template>
	<view class="content">
		<view class="content-bg">
			<view class="charts-box">
				 <qiun-data-charts 
				       type="pie"
				       :opts="opts"
				       :chartData="chartData"
				     />
			</view>
		</view>
	</view>
</template>

<script>
	import {GetBadProductsOfCurrentMonth} from '../../common/quality-api.js'
	
	export default {
		data() {
			return {
				chartData:{},
				opts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [5,5,5,5],
				        enableScroll: false,
				        extra: {
				          pie: {
				            activeOpacity: 0.5,
				            activeRadius: 10,
				            offsetAngle: 0,
				            labelWidth: 15,
				            border: true,
				            borderWidth: 3,
				            borderColor: "#FFFFFF",
				            // linearType: "custom"
				          }
				        }
				      }
			};
		},
		onLoad(){
			console.log("onLoad>>>");
			this.loadData();
		},
		methods:{
			loadData(){
				GetBadProductsOfCurrentMonth().then(res=>{
					var result = JSON.parse(res);
					this.dataArray = result;
					this.setChartData(result);
				});
			},
			
			setChartData(data){
				console.log(data);
				
				var array = [];
				data.source.forEach(item => {
					var a = {
						"name": item.poorname,
						"value": item.num
					}
					array.push(a);
				});
				var cdata = {
					"series": [ 
						{ data: array }
					]
				};
				this.chartData = cdata;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./quality.css");
</style>
